<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=0.5,maximum-scale=1, minimum-scale=1, user-scalable=no"> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./public/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../public/jquery/1.12.0/jquery.min.js"></script>
    <script src="../public/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    
    <!-- ECharts单文件引入 -->
    <script src="../public/echarts-2.2.7/build/dist/echarts.js"></script>  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>  
    <title>DHT11</title>
    <script type="text/javascript">
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds()+ seperator2 + date.getMilliseconds();
            return currentdate;
        }
        

        
        
        console.log("start"); 
         /*
        var options = {  
            invocationContext: {  
                host : hostname,  
                port: port,  
                path: client.path,  
                clientId: clientId  
            },  
            timeout: timeout,  
            keepAliveInterval: keepAlive,  
            cleanSession: cleanSession,  
            useSSL: ssl,  
            userName: userName,  
            password: password,  
            onSuccess: onConnect,  
            onFailure: function(){  
                console.log(12112);  
            }  
        };
        */
        var mqtt_server_addr="cnxel.cn"
        var mqtt_server_port=8084
        var mqtt_userid="test"
        var mqtt_username="test"
        var mqtt_userpasswd="test"
        var mqtt_topic="iotman/1512226921"
        
        var mqtt_keepAlive = 5;
       
        var mqtt_cleanSession = true;
        var mqtt_useSSL = true;
        
        var options={};
        if (mqtt_username) {
            options.userName = mqtt_username;
        }
        if (mqtt_userpasswd) {
            options.password = mqtt_userpasswd;
        }
        if (mqtt_keepAlive) {
            options.keepAliveInterval = Number(mqtt_keepAlive);
        }
        options.cleanSession = mqtt_cleanSession;
        options.useSSL= mqtt_useSSL;
        options.onSuccess=onConnect;
        options.onFailure=function(){
                console.log("connect error");  
        };
        
        client = new Paho.MQTT.Client(mqtt_server_addr, Number(mqtt_server_port), mqtt_userid);//建立客户端实例  
        client.connect(options);//连接服务器并注册连接成功处理事件
        console.log("connect"); 
        function onConnect() {
            console.log("onConnected");  
            client.subscribe(mqtt_topic);//订阅主题  
        }  
        client.onConnectionLost = onConnectionLost;//注册连接断开处理事件  
        client.onMessageArrived = onMessageArrived;//注册消息接收处理事件  
        function onConnectionLost(responseObject) {  
            if (responseObject.errorCode !== 0) {  
                console.log("onConnectionLost:"+responseObject.errorMessage);  
                console.log("连接已断开");  
             }  
        }  
        function onMessageArrived(message) {  
          //console.log("收到消息:"+message.payloadString);
          var revstr=message.payloadString;
          var revjsonobj = JSON.parse(revstr); //由JSON字符串转换为JSON对象
          console.log("t:"+revjsonobj.t+" h:"+revjsonobj.h);
          showT(parseFloat(revjsonobj.t));
          showH(parseFloat(revjsonobj.h));
          showNowTime();
        }
        showT=function (t){
            toption.series[0].data[0].value = (t).toFixed(2) - 0;
            tmyChart.setOption(toption,true); 
        }
        showH=function (h){
            hoption.series[0].data[0].value = (h).toFixed(2) - 0;
            hmyChart.setOption(hoption,true); 
        }
        var nowtimems,lasttimems;
        showNowTime=function(){
            var date = new Date();
            nowtimems=date.getTime();
            
            document.getElementById('NowTime').innerHTML="<h1>刷新时间：<font color=\"red\">"+getNowFormatDate()+"</font>&nbsp;</br><font color=\"blue\">和上一次刷新的间隔："+(nowtimems-lasttimems)+"</font>MS</br>设备里设定的间隔:70ms</br><a href=\"https://www.iotman.club/\"><h2>进入官网</h2></a></br>";
            lasttimems=nowtimems;
        }
        //发送消息  
        //message = new Paho.MQTT.Message("hello");  
        //message.destinationName = "/topic";  
       //client.send(message); 
    </script>
  </head>
  <body>
    <div id="NowTime" align="center"></div>
    <div class="container">
        <!--
        --仪表gauge-----------------------------------------------------------------------------
        -->
        <div class="row clearfix">
              <!--温度监控 开始-->
                    <div class="col-xs-12 col-sm-10 col-md-6 col-lg-6">
                        <p><h4>在线设备温度</h4></p>
                        <div id="t" style="height:300px"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../public/echarts-2.2.7/build/dist'
                                }
                            });
                            // 使用
                            require(
                                [
                                    'echarts',
                                    'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
                                ],
                                function (ec) {
                                    // 基于准备好的dom，初始化echarts图表
                                    //var 
                                    tmyChart = ec.init(document.getElementById('t')); 
                                    //var 
                                    toption = {
                                        tooltip : {
                                            formatter: "{a} <br/>{b} : {c}ºC"
                                        },
                                        toolbox: {
                                            show : true,
                                            feature : {
                                                mark : {show: true},
                                                restore : {show: true},
                                                saveAsImage : {show: true}
                                            }
                                        },
                                        series : [
                                            {
                                                name:'个性化仪表盘',
                                                type:'gauge',
                                                center : ['50%', '50%'],    // 默认全局居中
                                                radius : [0, '75%'],
                                                startAngle: 140,
                                                endAngle : -140,
                                                min: 0,                     // 最小值
                                                max: 100,                   // 最大值
                                                precision: 0,               // 小数精度，默认为0，无小数点
                                                splitNumber: 10,             // 分割段数，默认为5
                                                axisLine: {            // 坐标轴线
                                                    show: true,        // 默认显示，属性show控制显示与否
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        color: [[0.2, 'lightgreen'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']], 
                                                        width: 30
                                                    }
                                                },
                                                axisTick: {            // 坐标轴小标记
                                                    show: true,        // 属性show控制显示与否，默认不显示
                                                    splitNumber: 5,    // 每份split细分多少段
                                                    length :8,         // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        color: '#eee',
                                                        width: 1,
                                                        type: 'solid'
                                                    }
                                                },
                                                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                                    show: true,
                                                    formatter: function(v){
                                                        switch (v+''){
                                                            case '10': return '很低';
                                                            case '30': return '低';
                                                            case '60': return '中';
                                                            case '90': return '高';
                                                            default: return '';
                                                        }
                                                    },
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: '#333'
                                                    }
                                                },
                                                splitLine: {           // 分隔线
                                                    show: true,        // 默认显示，属性show控制显示与否
                                                    length :30,         // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                                        color: '#eee',
                                                        width: 2,
                                                        type: 'solid'
                                                    }
                                                },
                                                pointer : {
                                                    length : '80%',
                                                    width : 8,
                                                    color : 'auto'
                                                },
                                                title : {
                                                    show : true,
                                                    offsetCenter: ['-65%', -10],       // x, y，单位px
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: '#333',
                                                        fontSize : 15
                                                    }
                                                },
                                                detail : {
                                                    show : true,
                                                    backgroundColor: 'rgba(0,0,0,0)',
                                                    borderWidth: 0,
                                                    borderColor: '#ccc',
                                                    width: 100,
                                                    height: 40,
                                                    offsetCenter: ['-60%', 10],       // x, y，单位px
                                                    formatter:'{value}ºC',
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: 'auto',
                                                        fontSize : 30
                                                    }
                                                },
                                                data:[{value: 50, name: '仪表盘'}]
                                            }
                                        ]
                                    };
                                    
                                    
                                    // 为echarts对象加载数据
                                    /*
                                    var timeTicket;
                                    clearInterval(timeTicket);
                                    timeTicket = setInterval(
                                        function (){
                                            
                                        }
                                    ,2000);
                                    */
                                }
                                
                            );
                            //用于使chart自适应高度和宽度
                            //window.onresize = function () {
                            //    //重置容器高宽
                            //    myChart.resize();
                            //};
                        </script>
                        <br>
                    </div>
                    <!--温度监控 结束-->
                    <!--湿度监控 开始-->
                    <div class="col-xs-12 col-sm-10 col-md-6 col-lg-6">
                        <p><h4>在线设备湿度</h4></p>
                        <div id="h" style="height:300px"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../public/echarts-2.2.7/build/dist'
                                }
                            });
                            // 使用
                            require(
                                [
                                    'echarts',
                                    'echarts/chart/gauge' // 使用柱状图就加载bar模块，按需加载
                                ],
                                function (ec) {
                                    // 基于准备好的dom，初始化echarts图表
                                    //var 
                                    hmyChart = ec.init(document.getElementById('h')); 
                                    //var 
                                    hoption = {
                                        tooltip : {
                                            formatter: "{a} <br/>{b} : {c}%"
                                        },
                                        toolbox: {
                                            show : true,
                                            feature : {
                                                mark : {show: true},
                                                restore : {show: true},
                                                saveAsImage : {show: true}
                                            }
                                        },
                                        series : [
                                            {
                                                name:'个性化仪表盘',
                                                type:'gauge',
                                                center : ['50%', '50%'],    // 默认全局居中
                                                radius : [0, '75%'],
                                                startAngle: 140,
                                                endAngle : -140,
                                                min: 0,                     // 最小值
                                                max: 100,                   // 最大值
                                                precision: 0,               // 小数精度，默认为0，无小数点
                                                splitNumber: 10,             // 分割段数，默认为5
                                                axisLine: {            // 坐标轴线
                                                    show: true,        // 默认显示，属性show控制显示与否
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        color: [[0.2, 'lightgreen'],[0.4, 'orange'],[0.8, 'skyblue'],[1, '#ff4500']], 
                                                        width: 30
                                                    }
                                                },
                                                axisTick: {            // 坐标轴小标记
                                                    show: true,        // 属性show控制显示与否，默认不显示
                                                    splitNumber: 5,    // 每份split细分多少段
                                                    length :8,         // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        color: '#eee',
                                                        width: 1,
                                                        type: 'solid'
                                                    }
                                                },
                                                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                                                    show: true,
                                                    formatter: function(v){
                                                        switch (v+''){
                                                            case '10': return '很干燥';
                                                            case '30': return '干燥';
                                                            case '50': return '有点潮湿';
                                                            case '70': return '很潮湿';
                                                            default: return '';
                                                        }
                                                    },
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: '#333'
                                                    }
                                                },
                                                splitLine: {           // 分隔线
                                                    show: true,        // 默认显示，属性show控制显示与否
                                                    length :30,         // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                                        color: '#eee',
                                                        width: 2,
                                                        type: 'solid'
                                                    }
                                                },
                                                pointer : {
                                                    length : '80%',
                                                    width : 8,
                                                    color : 'auto'
                                                },
                                                title : {
                                                    show : true,
                                                    offsetCenter: ['-65%', -10],       // x, y，单位px
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: '#333',
                                                        fontSize : 15
                                                    }
                                                },
                                                detail : {
                                                    show : true,
                                                    backgroundColor: 'rgba(0,0,0,0)',
                                                    borderWidth: 0,
                                                    borderColor: '#ccc',
                                                    width: 100,
                                                    height: 40,
                                                    offsetCenter: ['-60%', 10],       // x, y，单位px
                                                    formatter:'{value}%',
                                                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                                        color: 'auto',
                                                        fontSize : 30
                                                    }
                                                },
                                                data:[{value: 50, name: '仪表盘'}]
                                            }
                                        ]
                                    };
                                    
                                    
                                    // 为echarts对象加载数据
                                    /*
                                    var timeTicket;
                                    clearInterval(timeTicket);
                                    timeTicket = setInterval(
                                        function (){
                                            
                                        }
                                    ,2000);
                                    */
                                }
                                
                            );
                            //用于使chart自适应高度和宽度
                            //window.onresize = function () {
                            //    //重置容器高宽
                            //    myChart.resize();
                            //};
                        </script>
                        <br>
                    </div>
                    <!--湿度监控 结束-->
        </div>
      </div>
  </body>
</html>
